<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div style="display: flex;">
        <!-- 搜索 -->
        <!-- <label class="el-form-item-label">出库单ID</label>
        <el-input v-model.trim="query.productOutBoundOrderNo" clearable placeholder="出库单ID" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">任务状态</label>
        <el-select v-model="query.status" class="filter-item" clearable placeholder="请选择" style="width: 185px;" @change="crud.toQuery">
          <el-option
            v-for="item in dict.allOrder_status"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <label class="el-form-item-label">料号</label>
        <el-input v-model.trim="query.productNo" clearable placeholder="料号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">标签号</label>
        <el-input v-model.trim="query.serialNo" clearable placeholder="标签号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">母托编码</label>
        <el-input v-model.trim="query.parentPalletCode" clearable placeholder="母托编码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">出库单编码</label>
        <el-input v-model.trim="query.outboundOrderCode" clearable placeholder="出库单编码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <!-- <rrOperation :crud="crud" /> -->
        <div style="display: flex;margin-left: 10px;">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- <crudOperation :permission="permission" /> -->
      <el-button type="warning" class="filter-item" size="mini" :loading="btn.download" :disabled="list.length === 0" @click="download">导出</el-button>
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="list" size="small" style="width: 100%;">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="productOutBoundOrderNo" label="出库单ID" />
        <el-table-column prop="productOutBoundOrderDetailNo" label="出库单详情ID" />
        <el-table-column prop="status" label="任务状态">
          <template slot-scope="scope">
            {{ dict.label.allOrder_status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="taskStart" label="任务起点" />
        <el-table-column prop="taskEnd" label="任务终点" />
        <el-table-column prop="priority" label="任务优先级" />
        <el-table-column prop="finishTime" label="任务完成时间" />
        <el-table-column prop="sources" label="来源" />
        <el-table-column prop="operation" label="操作" />
        <el-table-column prop="parentPalletCode" label="母托编码" />
        <el-table-column prop="productOutBoundTaskNo" label="出库任务编码" />
        <el-table-column prop="bandingType" label="打带类型">
          <template slot-scope="scope">
            {{ dict.label.banding_type[scope.row.bandingType] }}
          </template>
        </el-table-column>
        <el-table-column prop="wrappingQty" label="裹膜圈数" />
        <el-table-column prop="taskType" label="任务类型">
          <template slot-scope="scope">
            {{ dict.label.task_type[scope.row.taskType] }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column type="expand" width="40px">
          <template slot-scope="props">
            <el-table
              ref="sonTable"
              style="width: 100%;
              margin: 0 auto;
              padding: 0;"
              :data="props.row.detailHistoryList"
            >
              <el-table-column prop="productOutBoundOrderNo" label="出库单ID" />
              <el-table-column prop="productOutBoundOrderDetailNo" label="出库单详情ID" />
              <el-table-column prop="productOutBoundOrderTaskNo" label="出库任务ID" />
              <el-table-column prop="finishTime" label="任务完成时间" />
              <el-table-column prop="parentPalletCode" label="母托编码" />
              <el-table-column prop="productNo" label="产品编号" />
              <el-table-column prop="partnerProductNo" label="客户物料编码" />
              <el-table-column prop="qty" label="数量" />
              <el-table-column prop="serialNo" label="标签号" />
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop="updateTime" label="更新时间" />
            </el-table>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <!-- <pagination /> -->
      <el-pagination
        style="margin-top: 10px;"
        :current-page.sync="query.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlerSizeChange"
        @current-change="handlerCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import crudProductOutBoundTaskHistory from '@/api/work/productOutboundMissionHistory'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import rrOperation from '@crud/RR.operation'
// import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
// import pagination from '@crud/Pagination'

const defaultForm = { id: null, productOutBoundOrderNo: null, productOutBoundOrderDetailNo: null, status: null, taskStart: null, taskEnd: null, priority: null, finishTime: null, sources: null, operation: null, parentPalletCode: null, productOutBoundTaskNo: null, bandingType: null, wrappingQty: null, taskType: null, createTime: null, updateTime: null, createName: null, updateName: null }
export default {
  name: 'ProductOutboundMissionHistory',
  // components: { crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['allOrder_status', 'banding_type', 'task_type'],
  cruds() {
    return CRUD({ title: '1', url: 'api/productOutBoundTaskHistory/productTaskHistoryView', idField: 'id', sort: 'id,desc', crudMethod: { ...crudProductOutBoundTaskHistory },
      optShow: {
        reset: true,
        add: false,
        del: false,
        edit: false,
        download: true
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'productOutBoundTaskHistory:add', 'otherUser'],
        edit: ['admin', 'productOutBoundTaskHistory:edit', 'otherUser'],
        del: ['admin', 'productOutBoundTaskHistory:del', 'otherUser']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'productOutBoundOrderNo', display_name: '出库单ID' },
        { key: 'status', display_name: '任务状态' },
        { key: 'bandingType', display_name: '打带类型' },
        { key: 'taskType', display_name: '任务类型' }
      ],
      list: [],
      loading: false,
      query: {
        current: 1,
        size: 10
      },
      total: 0,
      btn: {
        download: false
      }
    }
  },
  mounted() {
    this.toQuery()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return false
    },
    checkDetail(row) {
      this.$router.push(`/outBoundManagement/productOutboundMissionDetailHistory?id=${row.id}`)
    },
    handlerSizeChange(e) {
      this.query.size = e
      this.query.current = 1
      this.getList()
    },
    handlerCurrentChange(e) {
      this.query.current = e
      this.getList()
    },
    toQuery() {
      this.query.current = 1
      this.getList()
    },
    reset() {
      this.query = {
        current: 1,
        size: 10
      }
      this.getList()
    },
    async getList() {
      try {
        this.loading = true
        const res = await crudProductOutBoundTaskHistory.getListAPI(this.query)
        if (res.result === 'OK') {
          this.list = res.data.content
          this.total = res.data.totalElements
        }
      } finally {
        this.loading = false
      }
    },
    async download() {
      try {
        this.btn.download = true
        const res = await crudProductOutBoundTaskHistory.downloadFileAPI(this.query)
        if (res && res instanceof Blob) {
          this.downloadFile(res)
        } else {
          this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
        }
      } finally {
        this.btn.download = false
      }
    },
    downloadFile(obj) {
      const url = window.URL.createObjectURL(new Blob([obj]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', `出库任务历史数据_${new Date().getTime()}.xlsx`)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

<style scoped>
  ::v-deep .el-icon-arrow-right {
    font-size: 18px;
  }
  ::v-deep .el-table__expanded-cell {
    padding: 0 !important;
  }
</style>
